<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>自选指标</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta name="screen-orientation" content="portrait" />
    <!-- <link rel="stylesheet" href="../Resources/css/mui.css"> -->
    <link rel="stylesheet" href="/Resources/2.0/css/public.css">
    <link rel="stylesheet" href="/Resources/2.0/css/aim.css">
    <script src="/Resources/2.0/js/size.js"></script>


</head>

<body>
    <div class="aim flexall" id="app">
        <div class="fixed-header">
            <table class="aim-table">
                <thead>
                    <tr>
                        <th><div class="fit-cell"></div><div class="cell-text">指标名称<a href="javscript:;" class="edit"><i class="icon icon-edit"></i></a></div></th>
                        <th><div class="fit-cell"></div><div class="cell-text">最新</div></th>
                        <th><div class="fit-cell"></div><div class="cell-text">涨跌</div></th>
                        <th><div class="fit-cell"></div><div class="cell-text">涨跌幅</div></th>
                    </tr>
                </thead>
            </table>
        </div>
        <div class="flex scroll-body">
            <table class="aim-table">
                <thead>
                    <tr>
                        <th>指标名称<a href="javscript:;"><i class="icon icon-edit"></i></a></th>
                        <th>最新</th>
                        <th>涨跌</th>
                        <th>涨跌幅</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <div>
                                螺纹杭州基价螺纹杭州基价
                                <span class="unit">周、万吨</span>
                            </div>
                        </td>
                        <td>
                            <div>
                                4106
                            </div>
                        </td>
                        <td>
                            <div class="red">
                                +15
                                <i class="icon icon-up"></i>
                            </div>
                        </td>
                        <td>
                            <div class="red">
                                +0.37%
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div>
                                螺纹杭州基价2
                            </div>
                        </td>
                        <td>
                            <div>
                                4106
                            </div>
                        </td>
                        <td>
                            <div>
                                0
                            </div>
                        </td>
                        <td>
                            <div>
                                0.00%
                            </div>
                        </td>

                    </tr>
                    <tr>
                        <td>
                            <div>
                                螺纹杭州基价3
                            </div>
                        </td>
                        <td>
                            <div>
                                4106
                            </div>
                        </td>
                        <td>
                            <div class="green">
                                -15
                                <i class="icon icon-down"></i>
                            </div>
                        </td>
                        <td>
                            <div class="green">
                                -0.37%
                            </div>
                        </td>

                    </tr>
                    <tr>
                        <td>
                            <div>
                                螺纹杭州基价4
                            </div>
                        </td>
                        <td>
                            <div>
                                4106
                            </div>
                        </td>
                        <td>
                            <div class="red">
                                +15
                                <i class="icon icon-up"></i>
                            </div>
                        </td>
                        <td>
                            <div class="red">
                                +0.37%
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div>
                                螺纹杭州基价5
                            </div>
                        </td>
                        <td>
                            <div>
                                4106
                            </div>
                        </td>
                        <td>
                            <div>
                                0
                            </div>
                        </td>
                        <td>
                            <div>
                                0.00%
                            </div>
                        </td>

                    </tr>
                    <tr>
                        <td>
                            <div>
                                螺纹杭州基价6
                            </div>
                        </td>
                        <td>
                            <div>
                                4106
                            </div>
                        </td>
                        <td>
                            <div class="green">
                                -15
                                <i class="icon icon-down"></i>
                            </div>
                        </td>
                        <td>
                            <div class="green">
                                -0.37%
                            </div>
                        </td>

                    </tr>
                    <tr>
                        <td>
                            <div>
                                螺纹杭州基价1
                            </div>
                        </td>
                        <td>
                            <div>
                                4106
                            </div>
                        </td>
                        <td>
                            <div class="red">
                                +15
                                <i class="icon icon-up"></i>
                            </div>
                        </td>
                        <td>
                            <div class="red">
                                +0.37%
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div>
                                螺纹杭州基价2
                            </div>
                        </td>
                        <td>
                            <div>
                                4106
                            </div>
                        </td>
                        <td>
                            <div>
                                0
                            </div>
                        </td>
                        <td>
                            <div>
                                0.00%
                            </div>
                        </td>

                    </tr>
                    <tr>
                        <td>
                            <div>
                                螺纹杭州基价3
                            </div>
                        </td>
                        <td>
                            <div>
                                4106
                            </div>
                        </td>
                        <td>
                            <div class="green">
                                -15
                                <i class="icon icon-down"></i>
                            </div>
                        </td>
                        <td>
                            <div class="green">
                                -0.37%
                            </div>
                        </td>

                    </tr>
                    <tr>
                        <td>
                            <div>
                                螺纹杭州基价4
                            </div>
                        </td>
                        <td>
                            <div>
                                4106
                            </div>
                        </td>
                        <td>
                            <div class="red">
                                +15
                                <i class="icon icon-up"></i>
                            </div>
                        </td>
                        <td>
                            <div class="red">
                                +0.37%
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div>
                                螺纹杭州基价5
                            </div>
                        </td>
                        <td>
                            <div>
                                4106
                            </div>
                        </td>
                        <td>
                            <div>
                                0
                            </div>
                        </td>
                        <td>
                            <div>
                                0.00%
                            </div>
                        </td>

                    </tr>
                    <tr>
                        <td>
                            <div>
                                螺纹杭州基价6
                            </div>
                        </td>
                        <td>
                            <div>
                                4106
                            </div>
                        </td>
                        <td>
                            <div class="green">
                                -15
                                <i class="icon icon-down"></i>
                            </div>
                        </td>
                        <td>
                            <div class="green">
                                -0.37%
                            </div>
                        </td>

                    </tr>
                    <tr>
                        <td>
                            <div>
                                螺纹杭州基价1
                            </div>
                        </td>
                        <td>
                            <div>
                                4106
                            </div>
                        </td>
                        <td>
                            <div class="red">
                                +15
                                <i class="icon icon-up"></i>
                            </div>
                        </td>
                        <td>
                            <div class="red">
                                +0.37%
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div>
                                螺纹杭州基价2
                            </div>
                        </td>
                        <td>
                            <div>
                                4106
                            </div>
                        </td>
                        <td>
                            <div>
                                0
                            </div>
                        </td>
                        <td>
                            <div>
                                0.00%
                            </div>
                        </td>

                    </tr>
                    <tr>
                        <td>
                            <div>
                                螺纹杭州基价3
                            </div>
                        </td>
                        <td>
                            <div>
                                4106
                            </div>
                        </td>
                        <td>
                            <div class="green">
                                -15
                                <i class="icon icon-down"></i>
                            </div>
                        </td>
                        <td>
                            <div class="green">
                                -0.37%
                            </div>
                        </td>

                    </tr>
                    <tr>
                        <td>
                            <div>
                                螺纹杭州基价4
                            </div>
                        </td>
                        <td>
                            <div>
                                4106
                            </div>
                        </td>
                        <td>
                            <div class="red">
                                +15
                                <i class="icon icon-up"></i>
                            </div>
                        </td>
                        <td>
                            <div class="red">
                                +0.37%
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div>
                                螺纹杭州基价5
                            </div>
                        </td>
                        <td>
                            <div>
                                4106
                            </div>
                        </td>
                        <td>
                            <div>
                                0
                            </div>
                        </td>
                        <td>
                            <div>
                                0.00%
                            </div>
                        </td>

                    </tr>
                    <tr>
                        <td>
                            <div>
                                螺纹杭州基价6
                            </div>
                        </td>
                        <td>
                            <div>
                                4106
                            </div>
                        </td>
                        <td>
                            <div class="green">
                                -15
                                <i class="icon icon-down"></i>
                            </div>
                        </td>
                        <td>
                            <div class="green">
                                -0.37%
                            </div>
                        </td>

                    </tr>
                </tbody>
            </table>
            <div class="add-choose">
                <img src="/Resources/2.0/images/add-choose.png" alt="">
                <p>添加自选</p>
            </div>
        </div>

        <div class="hoverBottomToggle" id="ball">
            <img src="/Resources/2.0/images/hoverBtn.png" alt="" class="hover-btn">
        </div>

    </div>

    <div id="touchBtn">
        <div class="touchBtn-inner">
            <a href="javascript:;" class="settop">
                置顶
            </a>
            <span class="line"></span>
            <a href="javascript:;">
                编辑
            </a>
            <span class="line"></span>
            <a href="javascript:;">
                预警
            </a>
            <span class="line"></span>
            <a href="javascript:;" class="delete">
                删除
            </a>
            <div class="arrow"></div>
        </div>
    </div>

    <script src="/Resources/2.0/js/zepto.js"></script>
    <script src="/Resources/2.0/js/mui.min.js"></script>
    <script src="/Resources/2.0/js/zepto.animate.basic.js"></script>
    <script src="/Resources/2.0/js/zepto.animate.js"></script>
    <script src="/Resources/2.0/js/inertia.js"></script>
    <script src="/Resources/2.0/js/public.js"></script>

    <script>
        
        // 移动设备初始化悬浮球
        if(/Android|webOS|iPhone|iPad|BlackBerry/i.test(navigator.userAgent)) {
            new Inertia(document.getElementById('ball'));
        } 

        // 屏蔽右键菜单默认事件
        document.oncontextmenu = function () {
            return false;
        }
        mui.init({
            gestureConfig: {
                longtap: true, //默认为false
            }
        });

      
        // 长按显示操作项
        mui('.aim-table').on('longtap', 'tbody tr', function (e) {
            var _height = Zepto("#touchBtn").height() + 40
            var _width = Zepto("#touchBtn").width() / 2
            var that = this
            Zepto(this).addClass('active')
            var ow = document.documentElement.clientWidth;
            var calWidth = 2 * _width + e.detail.center.x;
            var _top = e.detail.center.y - _height + "px"
            var _left = e.detail.center.x - _width + "px"
            var _right = 'auto'

            // 左右边界判断
            if (calWidth > ow) {
                _left = 'auto'
                _right = 0
            } else if (e.detail.center.x < 2 * _width) {
                _left = 0
            }
            // 上边界判断
            if (parseInt(_top) < 0) {
                _top = 0
            }
            Zepto("#touchBtn").css({ //设置右键菜单的位置
                top: _top,
                left: _left,
                right: _right,
                zIndex: 0,
                visibility: 'visible'
            });
            Zepto("#touchBtn").fadeIn(function () {
                Zepto(that).removeClass('active')
            })
            // 置顶
            mui('#touchBtn').off('tap','.settop').on('tap', '.settop', function (e) {
                Zepto('.aim-table tbody').prepend($(that))
                Zepto("#touchBtn").fadeOut(function(){
                    Zepto(this).css({ //设置右键菜单的位置
                        zIndex: -1,
                        visibility: 'hidden'
                    });
                })
            })
            // 删除
            mui('#touchBtn').off('tap','.delete').on('tap', '.delete', function (e) {
                $(that).remove()
                Zepto("#touchBtn").fadeOut(function(){
                    Zepto(this).css({ //设置右键菜单的位置
                        zIndex: -1,
                        visibility: 'hidden'
                    });
                })
            })

        })
        Zepto(document).on('tap', function () {
            Zepto("#touchBtn").fadeOut(function () {
                Zepto(this).css({ //设置右键菜单的位置
                    zIndex: -1,
                    visibility: 'hidden'
                });
            })
        })
        Zepto('.scroll-body').on('scroll', function () {
            Zepto("#touchBtn").fadeOut(function () {
                Zepto(this).css({ //设置右键菜单的位置
                    zIndex: -1,
                    visibility: 'hidden'
                });
            })
        })

    </script>


</body>

</html>